<template>
    <transition :name="current_transitionName">
        <div @keydown.enter="handleRight" class="mu-search">
            <bar @on-back="handleBack">
                <m-input type="search" class="mu-search-input" :icon-class="iconClass" v-model="current_searchText"
                         :placeholder="current_placeholder"
                         icon-width="30px"></m-input>
                <div slot="right" @click="handleRight">
                    <slot name="right">
                        <div class="mu-search-right" :class="rightClass">{{rightLabel}}</div>
                    </slot>
                </div>
            </bar>
            <slot name="fixed"></slot>
            <slot></slot>
            <!-- <div class="mu-search-view"></div> -->
        </div>
    </transition>
</template>

<script>
    import {
        lang
    } from 'muka'
    import mixins from '../../../mixins'
    import Bar from '../../bar'
    import MInput from '../../m-input'
    import ScrollablePane from '../../scrollable-pane'

    export default {
        name: 'mu-search',
        components: {
            Bar,
            MInput,
            ScrollablePane
        },
        mixins: [mixins],
        data: function () {
            return {
                current_value: false,
                current_searchText: '',
                current_placeholder: '',
                current_transitionName: ''
            }
        },
        watch: {
            current_searchText: function (newVal, oldVal) {
                newVal !== oldVal && this.$emit('on-change', newVal)
            }
        },
        props: {
            'transition-name': {
                type: String,
                default: 'mu-fade'
            },
            'right-label': String,
            'right-class': [String, Object],
            'search-text': [String, Object],
            'placeholder': String,
            'icon-class': {
                type: [String, Object],
                default: 'ion-search mu-search-icon'
            },
            'icon-position': {
                type: String,
                default: 'left'
            },
            placeholder: {
                type: String,
                default: '手机号/IC卡号/姓名/单位'
            }
        },
        methods: {
            handleBack: function (e) {
                this.$emit('on-back', e)
            },
            handleRight: function () {
                this.$emit('on-right-click', this.current_searchText)
            }
        }
    }
</script>
